<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="《缙青年》电子期刊阅读器">
    <meta name="author" content="缙云公司—韩剑">
    <title>阅读器 - 《缙青年》电子期刊</title>
    
    <!-- 预加载关键资源 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
    <!-- 字体加载 -->
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;600&display=swap" rel="stylesheet">
    
    <!-- 样式文件 -->
    <link rel="stylesheet" href="assets/css/common.css">
    <link rel="stylesheet" href="assets/css/reader.css">
    
    <!-- PWA支持 -->
    <meta name="theme-color" content="#2c3e50">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
</head>
<body>
    <!-- 阅读器容器 -->
    <div class="reader-container">
        <!-- 顶部导航栏 -->
        <header class="reader-header" id="readerHeader">
            <button class="nav-btn back-btn" id="backBtn" title="返回主页">
                <span class="icon">←</span>
                <span class="text">返回</span>
            </button>
            <div class="book-info">
                <h1 class="book-title" id="bookTitle">加载中...</h1>
            </div>
            <button class="nav-btn menu-btn" id="menuBtn" title="菜单">
                <span class="icon">⋮</span>
            </button>
        </header>

        <!-- PDF显示区域 -->
        <main class="pdf-viewer" id="pdfViewer">
            <!-- 加载状态 -->
            <div class="pdf-loading" id="pdfLoading">
                <div class="loading-spinner"></div>
                <p class="loading-text">正在加载期刊...</p>
                <div class="loading-progress">
                    <div class="progress-bar">
                        <div class="progress-fill" id="loadingProgress"></div>
                    </div>
                    <span class="progress-text" id="progressText">0%</span>
                </div>
            </div>

            <!-- PDF画布容器 -->
            <div class="pdf-canvas-container" id="pdfCanvasContainer" style="display: none;">
                <canvas class="pdf-canvas" id="pdfCanvas"></canvas>
            </div>

            <!-- 触控区域（简化版） -->
        <div class="touch-areas" id="touchAreas" style="display: none;">
            <div class="touch-area touch-left" id="touchLeft" data-action="prevPage"></div>
            <div class="touch-area touch-right" id="touchRight" data-action="nextPage"></div>
        </div>

        <!-- 简化的页面信息显示 -->
            <div class="simple-page-info" id="simplePageInfo">
                <span id="currentPageDisplay">1</span> / <span id="totalPagesDisplay">1</span>
            </div>
        </main>

        <!-- 底部进度条 -->
        <div class="progress-container" id="progressContainer">
            <div class="progress-bar">
                <div class="progress-fill" id="readingProgress"></div>
            </div>
        </div>
    </div>

    <!-- 错误提示模态框 -->
    <div class="error-modal" id="errorModal" style="display: none;">
        <div class="error-content">
            <div class="error-icon">⚠️</div>
            <h3 class="error-title" id="errorTitle">加载失败</h3>
            <p class="error-message" id="errorMessage">无法加载PDF文件</p>
            <div class="error-solutions" id="errorSolutions">
                <h4>解决方案：</h4>
                <ul>
                    <li>检查网络连接</li>
                    <li>刷新页面重试</li>
                    <li>返回主页选择其他期刊</li>
                </ul>
            </div>
            <div class="error-actions">
                <button class="btn btn-primary" id="errorRetryBtn">重试</button>
                <button class="btn btn-secondary" id="errorBackBtn">返回主页</button>
            </div>
        </div>
    </div>

    <!-- JavaScript文件 -->
    <!-- Polyfills（兼容性支持） -->
    <script src="assets/js/polyfills.js"></script>
    <!-- 兼容性检测 -->
    <script src="assets/js/compatibility.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
    <script>
        // 配置PDF.js worker
        if (typeof pdfjsLib !== 'undefined') {
            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
        }
    </script>

    <!-- 工具函数 -->
    <script src="assets/js/utils.js"></script>
    <!-- 阅读器脚本 -->
    <script src="assets/js/reader.js"></script>
</body>
</html>
